<template>
    <div class="chart-mini-progress">
        <div class="target" :style="{ left: target + '%'}">
            <span :style="{ backgroundColor: color }"/>
            <span :style="{ backgroundColor: color }"/>
        </div>
        <div class="progress-wrapper">
            <div class="progress" :style="{ backgroundColor: color, width: percentage + '%', height: height+'px' }"></div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'MiniProgress',
  props: {
    target: {
      type: Number,
      default: 0
    },
    height: {
      type: Number,
      default: 10
    },
    color: {
      type: String,
      default: '#13C2C2'
    },
    percentage: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="less" scoped>
    .chart-mini-progress {
        padding: 5px 0;
        position: relative;
        width: 100%;

        .target {
            position: absolute;
            top: 0;
            bottom: 0;

            span {
                border-radius: 100px;
                position: absolute;
                top: 0;
                left: 0;
                height: 4px;
                width: 2px;

                &:last-child {
                    top: auto;
                    bottom: 0;
                }
            }
        }
        .progress-wrapper {
            background-color: #f5f5f5;
            position: relative;

            .progress {
                transition: all .4s cubic-bezier(.08, .82, .17, 1) 0s;
                border-radius: 1px 0 0 1px;
                background-color: #1890ff;
                width: 0;
                height: 100%;
            }
        }
    }
</style>
